<template>
	<div class="choose-tpl">
		<div class="content-box">
			<div class="content-title">
				<ul>
					<li><i class="fa fa-check-circle" aria-hidden="true"></i>新建活动</li>
					<li class="linebox"></li>
					<li class="active"><i class="fa fa-check-circle" aria-hidden="true"></i>选择模板</li>
					<li class="linebox"></li>
					<li><i class="fa fa-check-circle" aria-hidden="true"></i>活动设置</li> 
				</ul>
			</div>
			<div class="change-btn text-center">
				<div class="btn cursor" :class="{'btn-active':tagChange==1}" @click="changeTag(1)">公有模板</div>
				<div class="btn cursor" :class="{'btn-active':tagChange==2}" @click="changeTag(2)">私有模板</div>
			</div>
		</div>
		<div class="tpl-view">
			<router-view></router-view>
		</div>
		
	</div>
</template>
<script>
import { baseUrl } from './../../config/env'
import * as api from './../../api/api';
	export default {
		data(){
			return {
				baseUrlHttp:baseUrl,
				tagChange:1, 	
			}
		},
		watch:{
			'$route'(a,b){
				if(a.name=='ownedAll'){
					this.tagChange=1
				}else{
					this.tagChange=2
				}
			}
		},
		methods: {
			changeTag(val){
				this.tagChange=val
				if(val==1){
					this.$router.push({name:'ownedAll'});
				}else{
					this.$router.push({name:'theirOwn'});
				}
			},
			
		},
		mounted(){
			if(this.$route.name=='ownedAll'){
				this.tagChange=1
			}else{
				this.tagChange=2
			}; 
		}
	}
</script>
<style lang="less" scoped>
.choose-tpl{
	position:relative;
	padding-top:128px;
	.content-box {
		width: 100%;
		background: #ffffff;
		padding-bottom: 20px;
		position:absolute;
		top:0;
		.content-title {
			padding-top: 20px;
			line-height: 30px;
			
		}

		.content-title ul {
			margin: 0 auto;
			font-weight: 700;
			font-size: 18px;
			color: #888888;
			text-align: center;
		}

		.content-title ul li {
			display: inline-block;
			padding-left: 5px;
			padding-right: 5px;
		}

		.content-title ul li.active {
			color: #5B7D9A;
		}

		.content-title ul .linebox {
			width: 10%;
			border-bottom: 1px solid #d0d0d0;
			border-top: 1px solid #e9e9e9;
			margin-bottom: 4px;
		}
		.change-btn{
			width:100%;
			margin-top:15px;
			.btn{
				display:inline-block;
				max-width:200px;
				padding:10px 20px;
				border:1px solid #888888;
				color:#888;
				border-radius:8px;
				&:last-child{
					margin-left:30px;
				}
				&:hover{
					border:1px solid #2DB7F5;
					background:#2DB7F5;
					color:#fff;
				}
			}
			.btn-active{
				border:1px solid #2DB7F5;
				background:#2DB7F5;
				color:#fff;
			}
		}
		.tpl-view{
			overflow:auto;
		}
	}
}
    .element-input{
        margin:10px 0; 
    }


</style>

